<template>
  <div class="wrap">
    <div class="d-flex align-items-center el-image">
      <img  src="../../cmdPics/wingBeamPics/wingbeam.png" width="220" height="220">
    </div>

    <!--定位基准面-->
    <div class="d-flex align-items-center">
      <label class="el-form-item__label">{{ $t('message.WingBeamDesignTool.basePlane') }}：</label>
      <query-list :tipMsg="$t('message.WingBeamDesignTool.basePlane')"
                  v-model="params.basePlane"
                  :active="params.queryListActiveMap.basePlane"
                  @switchQuery="switchQuery('basePlane')"/>
    </div>

    <!--参考上机翼面（蒙皮面）-->
    <div class="d-flex align-items-center">
      <label class="el-form-item__label">{{ $t('message.WingBeamDesignTool.topBaseSurface') }}：</label>
      <query-list :tipMsg="$t('message.WingBeamDesignTool.topBaseSurface')"
                  v-model="params.topBaseSurface"
                  :active="params.queryListActiveMap.topBaseSurface"
                  @switchQuery="switchQuery('topBaseSurface')"/>
    </div>

    <!--参考下机翼面（蒙皮面）-->
    <div class="d-flex align-items-center">
      <label class="el-form-item__label">{{ $t('message.WingBeamDesignTool.bottomBaseSurface') }}：</label>
      <query-list :tipMsg="$t('message.WingBeamDesignTool.bottomBaseSurface')"
                  v-model="params.bottomBaseSurface"
                  :active="params.queryListActiveMap.bottomBaseSurface"
                  @switchQuery="switchQuery('bottomBaseSurface')"/>
    </div>

    <!--参考腹板竖直轴线（直线）-->
    <div class="d-flex align-items-center">
      <label class="el-form-item__label">{{ $t('message.WingBeamDesignTool.verticalLineRef') }}：</label>
      <query-list :tipMsg="$t('message.WingBeamDesignTool.verticalLineRefText')"
                  v-model="params.verticalLineRef"
                  :active="params.queryListActiveMap.verticalLineRef"
                  @switchQuery="switchQuery('verticalLineRef')"/>
    </div>

    <!--参考竖直轴线靠近上翼面的点-->
    <div class="d-flex align-items-center">
      <label class="el-form-item__label">{{ $t('message.WingBeamDesignTool.topSurfaceRefPoint') }}：</label>
      <query-list :tipMsg="$t('message.WingBeamDesignTool.topSurfaceRefPoint')"
                  v-model="params.topSurfaceRefPoint"
                  :active="params.queryListActiveMap.topSurfaceRefPoint"
                  @switchQuery="switchQuery('topSurfaceRefPoint')"/>
    </div>

    <!--参考竖直轴线靠近下翼面的点-->
    <div class="d-flex align-items-center">
      <label class="el-form-item__label">{{ $t('message.WingBeamDesignTool.bottomSurfaceRefPoint') }}：</label>
      <query-list :tipMsg="$t('message.WingBeamDesignTool.bottomSurfaceRefPoint')"
                  v-model="params.bottomSurfaceRefPoint"
                  :active="params.queryListActiveMap.bottomSurfaceRefPoint"
                  @switchQuery="switchQuery('bottomSurfaceRefPoint')"/>
    </div>

    <!--梁缘条宽度-->
    <div class="d-flex align-items-center">
      <label class="el-form-item__label">{{ $t('message.WingBeamDesignTool.flangeWidth') }}：</label>
      <el-input v-model="params.flangeWidth" min="0" step="2" type="number"/>
      <label class="label">mm</label>
    </div>

    <!--梁缘条厚度-->
    <div class="d-flex align-items-center">
      <label class="el-form-item__label">{{ $t('message.WingBeamDesignTool.flangeThickness') }}：</label>
      <el-input v-model="params.flangeThickness" min="0" step="2" type="number"/>
      <label class="label">mm</label>
    </div>

    <!--腹板厚度-->
    <div class="d-flex align-items-center">
      <label class="el-form-item__label">{{ $t('message.WingBeamDesignTool.plateThickness') }}：</label>
      <el-input v-model="params.plateThickness" min="0" step="2" type="number"/>
      <label class="label">mm</label>
    </div>

    <!--铆接板高度-->
    <div class="d-flex align-items-center">
      <label class="el-form-item__label">{{ $t('message.WingBeamDesignTool.rivetingHeight') }}：</label>
      <el-input v-model="params.rivetingHeight" min="0" step="2" type="number"/>
      <label class="label">mm</label>
    </div>

    <!--铆接板厚度-->
    <div class="d-flex align-items-center">
      <label class="el-form-item__label">{{ $t('message.WingBeamDesignTool.rivetingThickness') }}：</label>
      <el-input v-model="params.rivetingThickness" min="0" step="2" type="number"/>
      <label class="label">mm</label>
    </div>

    <div class="btn">
      <el-button
          type="primary"
          size="small"
          :disabled="!isConfirm"
          @click="confirm">
        {{ $t('message.WingBeamDesignTool.confirm') }}
      </el-button>
      <el-button
          size="small"
          @click="cancel">
        {{ $t('message.WingBeamDesignTool.cancel') }}
      </el-button>
    </div>
  </div>
</template>

<script>
import DialogMixin from "../DialogMixin";
import {wingBeamCommand} from "../../../Command/WingBeamCommand";
import {ElementType} from "../../../modeling/TypeDefine";
import {getCommonPic} from "../../js/util/GetCommonPic";
import {Point} from "../../../../nodeApp/static/lib/crowncad-plugin-sdk-0.0.1";

export default {
  mixins: [DialogMixin],
  data() {
    return {
      params: {
        basePlane: [],
        topBaseSurface: [],
        bottomBaseSurface: [],
        verticalLineRef: [],
        topSurfaceRefPoint: [],
        bottomSurfaceRefPoint: [],
        filters: [ElementType.DATUMPLANE],
        flangeWidth: 80,
        flangeThickness: 10,
        plateThickness: 10,
        rivetingHeight: 40,
        rivetingThickness:10,
        queryListActiveMap: {
          basePlane: 1,
          topBaseSurface: 0,
          bottomBaseSurface: 0,
          verticalLineRef: 0,
          topSurfaceRefPoint: 0,
          bottomSurfaceRefPoint: 0
        }
      }
    }
  },

  mounted() {
    wingBeamCommand.init(500, 350, 500, () => {
      this.handlePickElement();
      this.setSelectType("basePlane");
    });
  },

  methods: {
    handlePickElement() {
      wingBeamCommand.handlePickElement((res) => {
        // 基准面
        if (this.params.queryListActiveMap.basePlane === 1) {
          this.params.basePlane.splice(0);
          res?.element.forEach(ele => {
            let plane = {
              id: ele?.element.id,
              name: ele.element?.params?.planeName,
              type: ele?.element?.type
            };
            this.params.basePlane.push(plane);
          });
        } else {
          // 缘条参考面数据
          let currentData = {};
          res?.element.forEach(ele => {
            currentData.id = ele?.element.id;
            currentData.name = ele.element?.name;
            currentData.type = ele?.element?.type;
            currentData.entityRefId = ele?.element?.params?.entityRefId;
            currentData.elementRefId = ele?.element?.params?.elementRefId;
            currentData.position = ele?.element?.params?.position;
          });
          // 填充上参考面
          if (this.params.queryListActiveMap.topBaseSurface === 1) {
            this.params.topBaseSurface.splice(0);
            if (currentData?.id > 0) {
              this.params.topBaseSurface.push(currentData);
            }
          }
          // 填充下参考面
          if (this.params.queryListActiveMap.bottomBaseSurface === 1) {
            this.params.bottomBaseSurface.splice(0);
            if (currentData?.id > 0) {
              this.params.bottomBaseSurface.push(currentData);
            }
          }

          // 填充参考线
          if (this.params.queryListActiveMap.verticalLineRef === 1) {
            this.params.verticalLineRef.splice(0);
            if (currentData?.id > 0) {
              this.params.verticalLineRef.push(currentData);
            }
          }

          // 填充上参考点
          if (this.params.queryListActiveMap.topSurfaceRefPoint === 1) {
            this.params.topSurfaceRefPoint.splice(0);
            if (currentData?.id > 0 || currentData?.id?.length > 0) {
              this.params.topSurfaceRefPoint.push(currentData);
            }
          }

          // 填充下参考点
          if (this.params.queryListActiveMap.bottomSurfaceRefPoint === 1) {
            this.params.bottomSurfaceRefPoint.splice(0);
            if (currentData?.id > 0 || currentData?.id?.length > 0) {
              this.params.bottomSurfaceRefPoint.push(currentData);
            }
          }
        }
      });
    },

    async confirm() {
      let lineStartPoint = new Point(this.params.topSurfaceRefPoint[0]?.position.x,
          this.params.topSurfaceRefPoint[0]?.position.y,
          this.params.topSurfaceRefPoint[0]?.position.z);
      let lineEndPoint = new Point(this.params.bottomSurfaceRefPoint[0]?.position.x,
          this.params.bottomSurfaceRefPoint[0]?.position.y,
          this.params.bottomSurfaceRefPoint[0]?.position.z);
      let params = {
        basePlaneId: this.params.basePlane[0].id,
        topFaceId: this.params.topBaseSurface[0].id,
        topFaceRefEntityId: this.params.topBaseSurface[0].entityRefId,
        bottomFaceId: this.params.bottomBaseSurface[0].id,
        bottomFaceRefEntityId: this.params.bottomBaseSurface[0].entityRefId,
        verticalLineRefId: this.params.verticalLineRef[0].id,
        verticalLinePoint: {
          start: lineStartPoint,
          end: lineEndPoint
        },
        flangeWidth: this.params.flangeWidth,
        flangeThickness: this.params.flangeThickness,
        plateThickness: this.params.plateThickness,
        rivetingHeight: this.params.rivetingHeight,
        rivetingThickness: this.params.rivetingThickness
      };

      if (this.isPointsOnLine()) {
        wingBeamCommand.eventBusAlertMsg("上下参考点必须为竖向参考线的两个端点。", "warning");
        return;
      }

      if (params?.topFaceId === params?.bottomFaceId) {
        wingBeamCommand.eventBusAlertMsg("上下参考面为同一个，请重新选择。", "warning");
      } else {
        wingBeamCommand.openLoading("");
        let ret = await wingBeamCommand.createWingBeamPart(params);
        wingBeamCommand.closeLoading();
        if (ret) {
          wingBeamCommand.closeActiveCmd();
        }
      }
    },

    cancel() {
      wingBeamCommand.closeActiveCmd();
    },

    // 两个参考点是否属于参考线
    isPointsOnLine() {
      let lineId = this.params.verticalLineRef[0].id.toString();
      let topPoint = this.params.topSurfaceRefPoint[0];
      let bottomPoint = this.params.bottomSurfaceRefPoint[0];
      if (topPoint?.elementRefId === lineId && bottomPoint?.elementRefId === lineId) {
        return true;
      } else {
        return false;
      }
    },

    setSelectType(typeName) {
      //wingBeamCommand.resetSelectType();
      if (typeName === "basePlane") {
        this.params.filters = [ElementType.DATUMPLANE];
      } else if (typeName === "topBaseSurface" || typeName === "bottomBaseSurface") {
        this.params.filters = [ElementType.FACE, ElementType.SURFACE];
      } else if (typeName === "verticalLineRef") {
        this.params.filters = [ElementType.CURVE, ElementType.EDGE];
      } else {
        this.params.filters = [ElementType.POINT, ElementType.VERTEX, ElementType.ORIGINPOINT, ElementType.POINTONCURVE, ElementType.DATUMPOINT, ElementType.MASSREFPOINT, ElementType.SKETCHREGION];
      }
      wingBeamCommand.setSelectType(this.params.filters);
    },

    changePluginContainerHeight() {
      wingBeamCommand.changePluginContainerHeight({minWidth: this.$el.clientWidth, maxHeight: this.$el.clientHeight})
    },

    switchQuery(name) {
      wingBeamCommand.resetSelectType();
      this.setSelectType(name);
      for (const key in this.params.queryListActiveMap) {
        if (key === name) {
          this.params.queryListActiveMap[key] = 1;
        } else {
          this.params.queryListActiveMap[key] = 0;
        }
      }
    }
  },

  watch: {
    "params.basePlane": function () {
      if (this.params.basePlane.length === 1) {
        this.switchQuery("topBaseSurface");
      }
    },

    "params.topBaseSurface": function () {
      if (this.params.topBaseSurface.length === 1) {
        this.switchQuery("bottomBaseSurface");
      }
    },

    "params.bottomBaseSurface": function () {
      if (this.params.bottomBaseSurface.length === 1) {
        this.switchQuery("verticalLineRef");
      }
    },

    "params.verticalLineRef": function () {
      if (this.params.verticalLineRef.length === 1) {
        this.switchQuery("topSurfaceRefPoint");
      }
    },

    "params.topSurfaceRefPoint": function () {
      if (this.params.topSurfaceRefPoint.length === 1) {
        this.switchQuery("bottomSurfaceRefPoint");
      }
    }
  },

  computed: {
    isConfirm() {
      if (this.params.basePlane.length === 1 &&
          this.params.topBaseSurface.length === 1 &&
          this.params.bottomBaseSurface.length === 1 &&
          this.params.verticalLineRef.length === 1 &&
          this.params.topSurfaceRefPoint.length === 1 &&
          this.params.bottomSurfaceRefPoint.length === 1 &&
          this.params.flangeWidth > 0 &&
          this.params.flangeThickness > 0 &&
          this.params.plateThickness > 0 &&
          this.params.rivetingHeight > 0) {
        return 1;
      } else {
        return 0;
      }
    }
  }
}
</script>

<style scoped>
.wrap {
  font-size: 12px;
}

.el-form-item__label {
  width: 120px;
}

.el-image {
  display: flex;
  justify-content: center;
}
</style>